<template>
  <div>
  <!-- 主内容区域 -->
  <div class="main-content">
    <div class="page-title">互动分析</div>

    <!-- 粉丝互动分析 -->
    <div class="interaction-analysis">
      <div class="analysis-header">
        <div class="analysis-title">粉丝互动数据分析</div>
        <div class="analysis-filters">
          <div class="date-filter">
            <span>时间范围：</span>
            <el-radio-group v-model="timeRange">
              <el-radio-button label="7d">近7天</el-radio-button>
              <el-radio-button label="30d">近30天</el-radio-button>
              <el-radio-button label="90d">近90天</el-radio-button>
              <el-radio-button label="180d">近180天</el-radio-button>
            </el-radio-group>
          </div>
          <el-button type="text" size="small" @click="exportData">
            <i class="fa-solid fa-download"></i> 导出数据
          </el-button>
        </div>
      </div>

      <!-- 互动数据卡片 -->
      <div class="interaction-stats">
        <div class="stat-card">
          <div class="stat-icon text-primary">
            <i class="fa-solid fa-heart"></i>
          </div>
          <div class="stat-title">总互动量</div>
          <div class="stat-value">{{ formatNumber(totalInteractions) }}</div>
          <div class="stat-change" :class="{ 'positive': interactionGrowth > 0, 'negative': interactionGrowth < 0 }">
            <i :class="interactionGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(interactionGrowth) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-success">
            <i class="fa-solid fa-thumbs-up"></i>
          </div>
          <div class="stat-title">点赞数</div>
          <div class="stat-value">{{ formatNumber(likes) }}</div>
          <div class="stat-change" :class="{ 'positive': likesGrowth > 0, 'negative': likesGrowth < 0 }">
            <i :class="likesGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(likesGrowth) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-warning">
            <i class="fa-solid fa-comment"></i>
          </div>
          <div class="stat-title">评论数</div>
          <div class="stat-value">{{ formatNumber(comments) }}</div>
          <div class="stat-change" :class="{ 'positive': commentsGrowth > 0, 'negative': commentsGrowth < 0 }">
            <i :class="commentsGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(commentsGrowth) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-info">
            <i class="fa-solid fa-share"></i>
          </div>
          <div class="stat-title">分享数</div>
          <div class="stat-value">{{ formatNumber(shares) }}</div>
          <div class="stat-change" :class="{ 'positive': sharesGrowth > 0, 'negative': sharesGrowth < 0 }">
            <i :class="sharesGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(sharesGrowth) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-primary">
            <i class="fa-solid fa-bookmark"></i>
          </div>
          <div class="stat-title">收藏数</div>
          <div class="stat-value">{{ formatNumber(collections) }}</div>
          <div class="stat-change" :class="{ 'positive': collectionsGrowth > 0, 'negative': collectionsGrowth < 0 }">
            <i :class="collectionsGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(collectionsGrowth) }}%
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon text-success">
            <i class="fa-solid fa-user-plus"></i>
          </div>
          <div class="stat-title">互动粉丝数</div>
          <div class="stat-value">{{ formatNumber(interactiveFans) }}</div>
          <div class="stat-change" :class="{ 'positive': interactiveFansGrowth > 0, 'negative': interactiveFansGrowth < 0 }">
            <i :class="interactiveFansGrowth > 0 ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'"></i>
            {{ Math.abs(interactiveFansGrowth) }}%
          </div>
        </div>
      </div>

      <!-- 互动趋势图表 -->
      <div class="interaction-trends">
        <div class="trends-header">
          <div class="trends-title">互动趋势分析</div>
          <div class="trends-filters">
            <el-radio-group v-model="trendChartType">
              <el-radio-button label="daily">日趋势</el-radio-button>
              <el-radio-button label="weekly">周趋势</el-radio-button>
              <el-radio-button label="monthly">月趋势</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="trends-chart">
          <canvas id="trendsChart"></canvas>
        </div>
      </div>

      <!-- 互动类型分布 -->
      <div class="interaction-types">
        <div class="types-header">
          <div class="types-title">互动类型分布</div>
          <el-button type="text" size="small" @click="refreshTypeData">
            <i class="fa-solid fa-refresh"></i> 刷新
          </el-button>
        </div>

        <div class="types-content">
          <div class="types-chart">
            <canvas id="typesChart"></canvas>
          </div>

          <div class="types-list">
            <div class="type-item" v-for="(type, index) in interactionTypes" :key="index">
              <div class="type-name">
                <div class="type-icon" :style="{ backgroundColor: type.color }">
                  <i :class="`fa-solid ${type.icon}`"></i>
                </div>
                {{ type.name }}
              </div>
              <div class="type-info">
                <el-progress :percentage="type.percentage" :stroke-width="12" :color="type.color"></el-progress>
                <div class="type-percentage">{{ type.percentage }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门互动内容 -->
      <div class="hot-content">
        <div class="hot-header">
          <div class="hot-title">热门互动内容</div>
          <div class="hot-filters">
            <el-radio-group v-model="hotContentType">
              <el-radio-button label="likes">点赞最多</el-radio-button>
              <el-radio-button label="comments">评论最多</el-radio-button>
              <el-radio-button label="shares">分享最多</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="hot-table">
          <el-table :data="hotContentData" stripe style="width: 100%">
            <el-table-column prop="title" label="内容标题"></el-table-column>
            <el-table-column prop="likes" label="点赞数" :formatter="formatNumber"></el-table-column>
            <el-table-column prop="comments" label="评论数" :formatter="formatNumber"></el-table-column>
            <el-table-column prop="shares" label="分享数" :formatter="formatNumber"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" size="small" @click="viewContent(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 粉丝活跃度分析 -->
      <div class="activity-analysis">
        <div class="activity-header">
          <div class="activity-title">粉丝活跃度分析</div>
          <div class="activity-filters">
            <el-select v-model="activityTimeRange" placeholder="时间范围" size="small">
              <el-option label="近7天" value="7d"></el-option>
              <el-option label="近30天" value="30d"></el-option>
              <el-option label="近90天" value="90d"></el-option>
            </el-select>
            <el-button type="text" size="small" @click="refreshActivityData">刷新</el-button>
          </div>
        </div>

        <div class="activity-content">
          <div class="activity-chart">
            <canvas id="activityChart"></canvas>
          </div>

          <div class="activity-list">
            <div class="activity-item" v-for="(item, index) in activityData" :key="index">
              <div class="activity-name">{{ item.name }}</div>
              <div class="activity-value">{{ item.value }}%</div>
              <el-progress :percentage="item.value" :stroke-width="12" status="success"></el-progress>
            </div>
          </div>
        </div>
      </div>

      <!-- 互动转化分析 -->
      <div class="conversion-analysis">
        <div class="conversion-header">
          <div class="conversion-title">互动转化分析</div>
          <el-button type="text" size="small" @click="refreshConversionData">
            <i class="fa-solid fa-refresh"></i> 刷新
          </el-button>
        </div>

        <div class="conversion-chart">
          <canvas id="conversionChart"></canvas>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<script>
import Chart from 'chart.js/auto';
export default {
  name: "InteractionAnalysis",
  components: {
    // 这里可以添加组件
  },
  data() {
    return {
      activeMenu: 'fans-interaction',
      timeRange: '30d',
      trendChartType: 'daily',
      hotContentType: 'likes',
      activityTimeRange: '7d',
      // 互动数据
      totalInteractions: 0,
      interactionGrowth: 0,
      likes: 0,
      likesGrowth: 0,
      comments: 0,
      commentsGrowth: 0,
      shares: 0,
      sharesGrowth: 0,
      collections: 0,
      collectionsGrowth: 0,
      interactiveFans: 0,
      interactiveFansGrowth: 0,
      // 互动类型分布
      interactionTypes: [],
      // 热门互动内容
      hotContentData: [],
      // 粉丝活跃度
      activityData: [],
      // 互动转化分析
      conversionData: []
    }
  },
  mounted() {
    // 初始化数据
    this.initData();

    // 绘制图表
    this.$nextTick(() => {
      this.drawTrendsChart();
      this.drawTypesChart();
      this.drawActivityChart();
      this.drawConversionChart();
    });
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    initData() {
      // 初始化互动数据
      this.totalInteractions = Math.floor(Math.random() * 10000) + 1000;
      this.interactionGrowth = Math.floor(Math.random() * 20) - 10;
      this.likes = Math.floor(Math.random() * 5000) + 500;
      this.likesGrowth = Math.floor(Math.random() * 20) - 10;
      this.comments = Math.floor(Math.random() * 2000) + 200;
      this.commentsGrowth = Math.floor(Math.random() * 20) - 10;
      this.shares = Math.floor(Math.random() * 1000) + 100;
      this.sharesGrowth = Math.floor(Math.random() * 20) - 10;
      this.collections = Math.floor(Math.random() * 500) + 50;
      this.collectionsGrowth = Math.floor(Math.random() * 20) - 10;
      this.interactiveFans = Math.floor(Math.random() * 3000) + 300;
      this.interactiveFansGrowth = Math.floor(Math.random() * 20) - 10;

      // 初始化互动类型分布
      this.interactionTypes = [
        { name: '点赞', icon: 'thumbs-up', color: '#4CD964', percentage: Math.floor(Math.random() * 40) + 30 },
        { name: '评论', icon: 'comment', color: '#FF9500', percentage: Math.floor(Math.random() * 30) + 20 },
        { name: '分享', icon: 'share', color: '#3399FF', percentage: Math.floor(Math.random() * 20) + 10 },
        { name: '收藏', icon: 'bookmark', color: '#FE2C55', percentage: Math.floor(Math.random() * 10) + 5 },
        { name: '其他', icon: 'ellipsis-h', color: '#999999', percentage: 100 - this.interactionTypes.reduce((sum, type) => sum + type.percentage, 0) }
      ];

      // 初始化热门互动内容
      this.hotContentData = [
        { title: '热门内容1', likes: Math.floor(Math.random() * 1000) + 100, comments: Math.floor(Math.random() * 200) + 20, shares: Math.floor(Math.random() * 100) + 10 },
        { title: '热门内容2', likes: Math.floor(Math.random() * 800) + 80, comments: Math.floor(Math.random() * 150) + 15, shares: Math.floor(Math.random() * 80) + 8 },
        { title: '热门内容3', likes: Math.floor(Math.random() * 600) + 60, comments: Math.floor(Math.random() * 100) + 10, shares: Math.floor(Math.random() * 60) + 6 },
        { title: '热门内容4', likes: Math.floor(Math.random() * 400) + 40, comments: Math.floor(Math.random() * 80) + 8, shares: Math.floor(Math.random() * 40) + 4 },
        { title: '热门内容5', likes: Math.floor(Math.random() * 200) + 20, comments: Math.floor(Math.random() * 50) + 5, shares: Math.floor(Math.random() * 20) + 2 }
      ];

      // 初始化粉丝活跃度
      this.activityData = [
        { name: '非常活跃', value: Math.floor(Math.random() * 20) + 10 },
        { name: '活跃', value: Math.floor(Math.random() * 30) + 20 },
        { name: '一般', value: Math.floor(Math.random() * 30) + 30 },
        { name: '不活跃', value: Math.floor(Math.random() * 20) + 10 },
        { name: '非常不活跃', value: 100 - this.activityData.reduce((sum, item) => sum + item.value, 0) }
      ];

      // 初始化互动转化分析
      this.conversionData = [
        { label: '曝光', value: 10000 },
        { label: '点击', value: Math.floor(Math.random() * 5000) + 3000 },
        { label: '互动', value: Math.floor(Math.random() * 2000) + 1000 },
        { label: '转化', value: Math.floor(Math.random() * 500) + 200 }
      ];
    },
    formatNumber(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    formatPercentage(value) {
      return value.toFixed(2) + '%';
    },
    drawTrendsChart() {
      const ctx = document.getElementById('trendsChart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [{
            label: '互动量',
            data: [Math.floor(Math.random() * 1000) + 100, Math.floor(Math.random() * 1000) + 100, Math.floor(Math.random() * 1000) + 100, Math.floor(Math.random() * 1000) + 100, Math.floor(Math.random() * 1000) + 100, Math.floor(Math.random() * 1000) + 100, Math.floor(Math.random() * 1000) + 100],
            borderColor: '#FE2C55',
            backgroundColor: 'rgba(254, 44, 85, 0.1)',
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawTypesChart() {
      const ctx = document.getElementById('typesChart').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: this.interactionTypes.map(type => type.name),
          datasets: [{
            data: this.interactionTypes.map(type => type.percentage),
            backgroundColor: this.interactionTypes.map(type => type.color)
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawActivityChart() {
      const ctx = document.getElementById('activityChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: this.activityData.map(item => item.name),
          datasets: [{
            label: '活跃度',
            data: this.activityData.map(item => item.value),
            backgroundColor: '#4CD964'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    drawConversionChart() {
      const ctx = document.getElementById('conversionChart').getContext('2d');
      new Chart(ctx, {
        type: 'funnel',
        data: {
          labels: this.conversionData.map(item => item.label),
          datasets: [{
            data: this.conversionData.map(item => item.value),
            backgroundColor: ['#3399FF', '#4CD964', '#FF9500', '#FE2C55']
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    exportData() {
      console.log('导出数据');
    },
    refreshTypeData() {
      console.log('刷新互动类型数据');
    },
    viewContent(content) {
      console.log('查看内容详情:', content);
    },
    refreshActivityData() {
      console.log('刷新粉丝活跃度数据');
    },
    refreshConversionData() {
      console.log('刷新互动转化数据');
    }
  }
}
</script>

<style scoped lang="scss">

/* 粉丝互动分析相关样式 */
.interaction-analysis {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.analysis-filters {
  display: flex;
  align-items: center;
  gap: 20px;
}

.date-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-filter .el-radio-group {
  display: flex;
}

.date-filter .el-radio-button__inner {
  padding: 8px 16px;
}

/* 互动数据卡片 */
.interaction-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-icon {
  font-size: 24px;
  margin-bottom: 10px;
}

.stat-title {
  font-size: 14px;
  color: var(--gray-color);
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.stat-change {
  font-size: 14px;
  margin-top: 10px;
}

.stat-change.positive {
  color: var(--success-color);
}

.stat-change.negative {
  color: var(--primary-color);
}

/* 互动趋势图表 */
.interaction-trends {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.trends-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.trends-title {
  font-size: 16px;
  font-weight: 500;
}

.trends-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trends-chart {
  height: 300px;
}

/* 互动类型分布 */
.interaction-types {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.types-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.types-title {
  font-size: 16px;
  font-weight: 500;
}

.types-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.types-chart {
  height: 300px;
}

.types-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  background-color: #F8F8F8;
}

.type-name {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.type-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.type-percentage {
  color: var(--gray-color);
}

/* 热门互动内容 */
.hot-content {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.hot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hot-title {
  font-size: 16px;
  font-weight: 500;
}

.hot-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hot-table {
  width: 100%;
}

/* 粉丝活跃度分析 */
.activity-analysis {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.activity-title {
  font-size: 16px;
  font-weight: 500;
}

.activity-filters {
  display: flex;
  align-items: center;
  gap: 10px;
}

.activity-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.activity-chart {
  height: 300px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  background-color: #F8F8F8;
}

.activity-name {
  font-weight: 500;
}

.activity-value {
  color: var(--gray-color);
}

/* 互动转化分析 */
.conversion-analysis {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.conversion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.conversion-title {
  font-size: 16px;
  font-weight: 500;
}

.conversion-chart {
  height: 300px;
}

</style>
